import 'dart:io';

import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:super_tool_server/common/utils/color_util.dart';
import 'package:super_tool_server/component/button/round_button.dart';
import 'package:super_tool_server/component/clickable/clickable_widget.dart';
import 'package:super_tool_server/component/theme/theme.dart';
import 'package:super_tool_server/page/home/server_widget.dart';
import 'package:super_tool_server/page/tab_about/about.dart';
import 'package:super_tool_server/page/home/log_widget.dart';
import 'package:super_tool_server/page/tab_setting/setting.dart';

class SuperToolWidget extends StatefulWidget {
  const SuperToolWidget(
    this._arguments, {
    Key? key,
  }) : super(key: key);
  final Map<String, dynamic> _arguments;

  @override
  State<SuperToolWidget> createState() => _SuperToolWidgetState();
}

class _SuperToolWidgetState extends State<SuperToolWidget> {
  bool isFullScreen = true;

  final List<TabInfo> tabInfoList = [
    TabInfo()
      ..title = '主页'
      ..child = ServerWidget(),
    TabInfo()
      ..title = '设置'
      ..child = SettingWidget(),
    TabInfo()
      ..title = '关于'
      ..child = AboutWidget(),
  ];
  int selectedIndex = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ServerWidget();
    return Flex(
      crossAxisAlignment: CrossAxisAlignment.start,
      direction: Axis.vertical,
      children: [
        GestureDetector(
          onPanUpdate: (details) async {
          },
          onDoubleTap: () async {

          },
          child: Container(
            color: Colors.grey,
            padding: const EdgeInsets.only(left: 20, top: 10, bottom: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                ClickableWidget(
                  onTap: () {
                  },
                  builder: (context, ClickableBuilderInfo info) {
                    return Container(
                      decoration: const BoxDecoration(
                        color: Colors.redAccent,
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                      ),
                      width: 20,
                      height: 20,
                      alignment: Alignment.center,
                      child: info.isHover
                          ? const Icon(
                              Icons.close,
                              size: 16,
                              color: Colors.black,
                            )
                          : Container(),
                    );
                  },
                ),
                const SizedBox(
                  width: 12,
                ),
                ClickableWidget(
                  onTap: () {
                  },
                  builder: (context, ClickableBuilderInfo info) {
                    return Container(
                      decoration: const BoxDecoration(
                        color: Colors.yellowAccent,
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                      ),
                      width: 20,
                      height: 20,
                      alignment: Alignment.center,
                      child: info.isHover
                          ? const Padding(
                              padding: EdgeInsets.only(top: 8.0),
                              child: Icon(
                                Icons.maximize,
                                size: 16,
                                color: Colors.black,
                              ),
                            )
                          : Container(),
                    );
                  },
                ),
                const SizedBox(
                  width: 12,
                ),
                ClickableWidget(
                  onTap: () async {

                  },
                  builder: (context, ClickableBuilderInfo info) {
                    return Container(
                      decoration: const BoxDecoration(
                        color: Colors.greenAccent,
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                      ),
                      width: 20,
                      height: 20,
                      alignment: Alignment.center,
                      child: info.isHover
                          ? const Icon(
                              Icons.home_max,
                              size: 16,
                              color: Colors.black,
                            )
                          : Container(),
                    );
                  },
                ),
              ],
            ),
          ),
        ),
        Container(
          // color: Colors.green.withOpacity(0.5),
          padding: const EdgeInsets.only(left: 15, right: 15, top: 10, bottom: 20),
          child: Row(
            children: tabInfoList
                .mapIndexed((index, item) => ClickableWidget(onTap: () {
                      if (selectedIndex != index) {
                        setState(() {
                          selectedIndex = index;
                        });
                      }
                    }, builder: (BuildContext context, ClickableBuilderInfo info) {
                      return Container(
                        margin: EdgeInsets.only(left: index > 0 ? 10 : 0),
                        child: IntrinsicWidth(
                          child: Column(
                            children: [
                              Container(
                                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 3),
                                alignment: Alignment.center,
                                decoration: selectedIndex == index
                                    ? BoxDecoration(
                                        color: purple_cd78f9,
                                        borderRadius: const BorderRadius.all(Radius.circular(18)),
                                      )
                                    : BoxDecoration(
                                        color: info.isHover ? purple_cd78f9.withOpacity(0.5) : null,
                                        borderRadius: const BorderRadius.all(Radius.circular(18)),
                                      ),
                                child: Text(
                                  item.title,
                                  style: TextStyle(
                                    color: selectedIndex == index ? Colors.white : Colors.black,
                                    fontSize: 20,
                                  ),
                                ),
                              ),
                              const SizedBox(
                                height: 10,
                              ),
                              Container(
                                height: 4,
                                color: selectedIndex == index ? purple_cd78f9 : Colors.transparent,
                              )
                            ],
                          ),
                        ),
                      );
                    }))
                .toList(),
          ),
        ),
        Expanded(
          child: Container(
            decoration: BoxDecoration(
                border: Border(
                    top: BorderSide(
                        color: CustomTheme.of(context)!.colors.border.gray1, width: 1, style: BorderStyle.solid))),
            // color: Colors.red.withOpacity(0.5),
            child: tabInfoList[selectedIndex].child,
          ),
        ),
      ],
    );
  }
}

class TabInfo {
  late String title;
  late Widget child;
}
